import React, { FC } from 'react';
import classNames from 'classnames/bind';
import MyIcon from '@/components/MyIcon';
import styles from './BlockItem.less';

const cx = classNames.bind(styles);

type IconPosition = 'left' | 'right';

export interface BlockItemProps {
  /** 色块标题 */
  title: string;
  /** 色块内容 */
  desc: string;
  /** 色块图标 */
  icon: string;
  /** 色块背景颜色 */
  bgColor: string;
  /** 色块文字颜色 */
  textColor: string;
  /** 色块Icon图标位置 */
  iconPos?: IconPosition;
  /** 色块Icon图标的样式类名 */
  iconClassName?: string;
  /** 色块Icon图标的样式 */
  iconStyle?: React.CSSProperties;
  descStyle?: React.CSSProperties;
  titleStyle?: React.CSSProperties;
  /** 色块传入样式 */
  containerStyle?: React.CSSProperties;
}

const BlockItem: FC<BlockItemProps> = (props) => {
  const {
    title,
    desc,
    icon,
    bgColor,
    textColor,
    iconPos,
    iconClassName,
    iconStyle,
    descStyle,
    titleStyle,
    containerStyle = {},
  } = props;

  const contentCls = cx(styles.blockContent, {
    textLeft: iconPos === 'right',
  });

  const iconCls = cx(styles.blockIcon, iconClassName);

  return (
    <div
      style={{ background: bgColor, color: textColor, ...containerStyle }}
      className={styles.block}
    >
      {iconPos === 'left' ? <MyIcon type={icon} className={iconCls} style={iconStyle} /> : null}
      <div className={contentCls}>
        <div className={styles.blockTitle} style={titleStyle}>
          {title}
        </div>
        <div className={styles.blockDesc} style={descStyle}>
          {desc}
        </div>
      </div>
      {iconPos === 'right' ? <MyIcon type={icon} className={iconCls} style={iconStyle} /> : null}
    </div>
  );
};

BlockItem.defaultProps = {
  iconPos: 'right',
};

export default BlockItem;
